<template>
  <a-drawer v-model:open="visible" title="审批人" placement="right" width="600px" :footer-style="{ textAlign: 'right' }">
    <h4>审批类型</h4>
    <a-card size="small">
      <a-radio-group v-model:value="radioGroup">
        <a-radio value="1">人工审批</a-radio>
        <a-radio value="2">自动通过</a-radio>
        <a-radio value="3">自动拒绝</a-radio>
      </a-radio-group>
    </a-card>
    <h4 style="margin: 10px 0">设置审批人</h4>
    <a-card size="small">
      <a-radio-group v-model:value="radioGroup1">
        <a-radio value="1">指定成员</a-radio>
        <a-radio value="2">发起人自己</a-radio>
        <a-radio value="3">发起人自选</a-radio>
        <a-radio value="4">指定角色</a-radio>
        <a-radio value="5">直属主管</a-radio>
        <a-radio value="6">部门主管</a-radio>
        <a-radio value="7">连续多级主管</a-radio>
      </a-radio-group>
      <a-divider style="margin: 5px 0 10px 0" v-if="radioGroup1 === '1' || radioGroup1 === '4'" />
      <a-card title="添加指定成员" v-if="radioGroup1 === '1'" size="small">
        <template #extra
          ><a href="#" @click="showUserModel()">添加</a>
          <DeleteOutlined
            style="margin-left: 10px"
            @click="
              () => {
                radioGroup1 = null;
              }
            "
        /></template>
        <a-card title="已选择人员" size="small"> 
           <a-tag closable @close="handleCloseUser(index)" v-for="(item,index) in selectedRows" :key="item.id">{{ item.realname }}</a-tag>
        </a-card>
      </a-card>
      <a-card title="请选择角色" v-if="radioGroup1 === '4'" size="small">
        <template #extra
          ><a href="#">添加</a>
          <DeleteOutlined
            style="margin-left: 10px"
            @click="
              () => {
                radioGroup1 = null;
              }
            "
        /></template>
      </a-card>
    </a-card>
    <h4 style="margin: 10px 0">多人审批时采用的审批方式</h4>
    <a-card size="small">
      <a-radio-group v-model:value="radioGroup2">
        <a-radio :style="radioStyle" value="1">会签（需所有审批人同意，不限顺序）</a-radio>
        <a-radio :style="radioStyle" value="2">或签（只需一名审批人同意或拒绝即可）</a-radio>
        <a-radio :style="radioStyle" value="3">依次审批（按顺序同意或拒绝）</a-radio>
        <a-radio :style="radioStyle" value="4">投票（满足设定的同意人数即可通过）</a-radio>
      </a-radio-group>
    </a-card>
    <h4 style="margin: 10px 0">审批人为空时</h4>
    <a-card size="small">
      <a-radio-group v-model:value="radioGroup3">
        <a-radio :style="radioStyle" value="1">自动通过</a-radio>
        <a-radio :style="radioStyle" value="2">自动拒绝</a-radio>
        <a-radio :style="radioStyle" value="3">跳过当前节点</a-radio>
        <a-radio :style="radioStyle" value="4">自动转交给管理员</a-radio>
        <a-radio :style="radioStyle" value="5">指定人员审批</a-radio>
      </a-radio-group>
    </a-card>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="onClose">确认</a-button>
    </template>
  </a-drawer>
  <!-- 用户选择框 -->
  <UserModel ref="userModelRefs" @selectUser="selectUser"/>
</template>
<script setup>
  import { ref, watch, computed, reactive } from 'vue';
  import { DeleteOutlined } from '@ant-design/icons-vue';
  import { useFlowDesignerStore } from '/@/store/modules/flowable';
  import UserModel from './userModel.vue';
  let props = defineProps({
    directorMaxLevel: {
      type: Number,
      default: 0,
    },
  });

  const radioGroup = ref('1');
  const radioGroup1 = ref('1');
  const radioGroup2 = ref('1');
  const radioGroup3 = ref('1');
  const radioStyle = reactive({
    display: 'flex',
    height: '30px',
    lineHeight: '30px',
  });
  let store = useFlowDesignerStore();
  let { setApproverConfig, setApprover } = store;
  let approverDrawer = computed(() => store.approverDrawer);
  let visible = computed({
    get() {
      return approverDrawer.value;
    },
    set() {
      closeDrawer();
    },
  });
  const closeDrawer = () => {
    setApprover(false);
  };
  // 显示用户选择框
  const userModelRefs = ref(null);
  const showUserModel = () => {
    userModelRefs.value.showUserModel(true);
  };
  // 已经选择的用户

const selectedRows = ref([]);
  const selectUser = (user) => {
    console.log(user);
    selectedRows.value = user;
  };

  // 删除已经选择的用户
  const handleCloseUser = (index)=>{
    selectedRows.value.splice(index,1);
  }
</script>
<style lang="less" scoped>
  ::v-deep .ant-radio-wrapper {
    margin: 5px 0;
  }
</style>
